<template>
  <!-- 添加或修改菜单对话框 -->
  <ElementDialog show-full-screen :title="!form.id ? '新增' : '修改'" width="700px" :visible.sync="visible">
    <ElForm ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <ElRow>
        <ElCol>
          <ElFormItem label="资产分类" prop="assetType">
            <ElSelect v-model="form.assetType" placeholder="请选择" @change="assetChange">
              <ElOption v-for="item in assetTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow v-if="accountingVisible">
        <ElCol>
          <ElFormItem label="核算分类" prop="accountingMethod">
            <ElSelect v-model="form.accountingMethod" placeholder="请选择">
              <ElOption
                v-for="item in accountingMethodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow>
        <ElCol>
          <ElFormItem label="上级分类">
            <VueTreeSelect
              v-model="form.parentId"
              :options="ctiOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级分类" />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElFormItem label="分类名称" prop="name">
        <ElInput v-model="form.name" placeholder="请输入分类名称" />
      </ElFormItem>
      <ElFormItem label="分类编码" prop="code">
        <ElInput v-model="form.code" placeholder="请输入分类编码" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <div class="dialog-footer">
        <ElButton size="mini" type="primary" @click="dataFormSubmit">确 定</ElButton>
        <ElButton size="mini" @click="visible = false">取 消</ElButton>
      </div>
    </template>
  </ElementDialog>
</template>

<script>
  import { getObj, addObj, putObj, fetchTree, getOptions } from '@/api/asset/fyassetcti'

  export default {
    name: 'CtiForm',
    data() {
      return {
        // 菜单树选项
        ctiOptions: [],
        assetTypeOptions: [],
        accountingMethodOptions: [],
        // 是否显示弹出层
        visible: false,
        accountingVisible: false,
        form: {
          name: '',
          code: '',
          parentId: '',
          parentName: '',
          assetType: undefined,
          accountingMethod: '0'
        },
        // 表单校验
        rules: {
          name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
          code: [{ required: true, message: '分类编码不能为空', trigger: 'blur' }],
          assetType: [{ required: true, message: '资产分类不能为空' }],
          accountingMethod: [{ required: true, message: '核算分类不能为空' }]
        }
      }
    },
    methods: {
      init(isEdit, id) {
        if (id !== null) {
          this.form.parentId = id
        }
        this.visible = true
        this.getTreeselect()

        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (isEdit) {
            getObj(id).then(response => {
              this.form = response.data.data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this.form.parentId === undefined) {
              this.form.parentId = 0
            }
            const row = this.form
            if (this.ctiOptions.length > 0) {
              // 父级名称
              this.ctiOptions[0].children.forEach(item => {
                if (item.id === row.parentId) {
                  row.parentName = item.name
                }
              })
            }

            if (row.id) {
              putObj(row).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            } else {
              addObj(row).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        this.ctiOptions = []
        fetchTree().then(response => {
          const ctiOption = { id: 0, name: '请选择', children: response.data.data }
          this.ctiOptions.push(ctiOption)
        })

        getOptions('cti_asset_type').then(response => {
          this.assetTypeOptions = response.data.data
        })

        getOptions('cti_accounting_method').then(response => {
          this.accountingMethodOptions = response.data.data
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }

        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      assetChange(option) {
        this.accountingVisible = option === 'CONSUMABLES'
        fetchTree(this.form).then(response => {
          this.ctiOptions = response.data.data
        })
      }
    }
  }
</script>
